<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0">
  <title>loading sheets in elements defined in main document</title>
  <script src="../../../polymer.js"></script>
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../node_modules/chai/chai.js"></script>
</head>
<body>
  <x-foo></x-foo>
  <div class="red1">red</div>
  <polymer-element name="x-foo">
    <template>
      <link rel="stylesheet" polymer-scope="global" href="sheet1.css">
      <link rel="stylesheet" href="sheet1.css">
      <div id="div" class="red1">Red</div>
    </template>
    <script>Polymer('x-foo');</script>
  </polymer-element>
  <script>
    document.addEventListener('WebComponentsReady', function() {
      var foo = document.querySelector('x-foo');
      var color = 'rgb(255, 0, 0)';
      chai.assert.equal(getComputedStyle(foo.$.div).backgroundColor, color,
        'computed color matches expected color');

      var outerDiv = document.querySelector('.red1');
      chai.assert.equal(getComputedStyle(outerDiv).backgroundColor, color,
        'computed color matches expected color');  
      done();
    });
  </script>
</body>
</html>
